<template>
  <!--    问题解决方式     -->

  <view class="allContainer" :style="[{ minHeight: '1000rpx' }]">
    <!-- <view :style="[{ display: 'flex' }, { flexDirection: 'row' }]">
      <view :style="[{ flex: '1' }, { height: '1px' }]"></view>
      <image
        :src="bridImgUrl"
        :style="[{ width: '249rpx' }, { height: '258rpx' }]"
      />
    </view> -->
    <image class="textImg" :src="partTextImgUrl" />
    <image class="imgFloatRight" :src="imgPavilion" />
    <view :style="[{ marginLeft: '32rpx' }, { marginRight: '32rpx' }]">
      <view class="contentBack">
        <view :style="[{ marginTop: '33rpx' }, { display: 'flex' }]">
          <view class="blackBox"> </view>
          <view style="padding-right: 32rpx">
            <span class="smallTitleGreen">
              根据不同的生活环境以及个人成长过程的不同抉择，每个人会逐渐体现出独特的属性，</span
            >
            <span class="smallTitleRed"> {{ protectorName }}</span>
            <span class="smallTitleGreen">察觉到你的六维属性如下：</span>
          </view>
        </view>

        <!-- <view
        class="gemstonOutsizeBox"
        
      >
        <text class="gemstoneText">{{ problemSolving.featureList[0] }}</text>

        <view class="gemstoneBox">
          <text class="gemstoneText">{{ problemSolving.featureList[1] }}</text>
          <image
            class="gemstoneImg"
            :src="gemstoneImgUrl"
            :style="[{ width: '228rpx' }, { height: '226rpx' }]"
          />
          <text class="gemstoneText">{{ problemSolving.featureList[2] }}</text>
        </view>

        <text class="gemstoneText">{{ problemSolving.featureList[3] }}</text>
      </view> -->

        <!-- <view class="smallTitleGreen" :style="[{ marginTop: '85rpx' }]">{{
        problemSolving.subTitle
        
      }}</view> -->
        <view class="content" :style="[{ marginTop: '50rpx' }]">
          <!-- 雷达图 -->
          <view class="charts-box">
            <mpvue-echarts
              @onInit="lineInit"
              canvasId="radar"
              ref="lineChart"
            />
          </view>
        </view>
        <view
          class="smallTitleGreen"
          :style="[
            { marginTop: '42rpx' },
            { paddingLeft: '32rpx' },
            { color: '#457766' },
          ]"
          >你当前状态下最为显著的属性特征是:</view
        >
        <view class="maxMinContent">
          <view class="propertyNameBtn"
            ><view class="propertyName">{{
              maxScoreDimension.propertyName
            }}</view>
          </view>
          <view class="propertyDesc"
            ><view class="blueBox"></view
            ><view style="flex: 1">{{
              maxScoreDimension.propertyDesc
            }}</view></view
          >
          <view class="propertyNameBtn"
            ><view class="propertyName">{{
              minScoreDimension.propertyName
            }}</view>
          </view>

          <view class="propertyDesc"
            ><view class="blueBox"></view
            ><view style="flex: 1">{{
              minScoreDimension.propertyDesc
            }}</view></view
          >
        </view>
        <image :src="bottomImg" class="bottomImg" />
      </view>

      <!-- <view
        class="onePartContent"
        :style="[{ marginTop: '49rpx' }, { width: '514rpx' }]"
      >
        <view
          :style="[{ marginTop: '10rpx' }]"
          v-for="(descItem, descIndex) in problemSolving.desc"
          :key="descIndex"
          >{{ descItem }}</view
        >
      </view> -->
    </view>
  </view>
</template>

<script>
import * as echarts from "./echarts/echarts.min5.2.0.js";
import mpvueEcharts from "./echarts/echarts.vue";
export default {
  components: {
    mpvueEcharts,
  },
  props: {
    isBlur: {
      type: Boolean,
      default: false,
    },

    protectorName: {
      type: String,
      default: "",
    },
    maxScoreDimension: {
      type: Object,
      default() {
        return {
          propertyDesc: "",
          propertyName: "",
        };
      },
    },
    minScoreDimension: {
      type: Object,
      default() {
        return {
          propertyDesc: "",
          propertyName: "",
        };
      },
    },

    radarChart: {
      type: Array,
      default() {
        return [];
      },
    },

    problemSolving: {
      type: Object,
      default() {
        return {
          featureList: [
            "测试测试测试测试",
            "测试测试测试测试",
            "测试测试测试测试",
            "测试测试测试测试",
          ],
          subTitle:
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          title: "测试测试测试测试测试测试测试测试：",
          desc: [
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
          ],
        };
      },
    },
  },
  data() {
    return {
      imgPavilion:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/mountain.png",
      bgUrl:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/bg_part7_1.png",
      partTextImgUrl: this.$imgBaseSelf + "career/careerAssessNew/title6.png",
      gemstoneImgUrl:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessResult/part7_gemstone.png",
      bottomImg:
        "https://img3.job1001.com/ypMp/elan/images/career/careerAssessNew/bottom.png",
      chartData: {
        title: {
          text: "",
        },
        legend: {
          data: [],
        },
        // tooltip: {
        //   //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
        //   confine: true,
        //   enterable: true, //鼠标是否可以移动到tooltip区域内
        // },
        radar: {
          // shape: 'circle',
          radius: "65%",
          // center: ["50%", "50%"],
          splitNumber: 3, // 雷达图圈数设置
          name: {
            textStyle: {
              fontSize: 15,
            },
          },
          indicator: [
            //   { name: "克制", max: 10, color: "#C06B54" },
            //   { name: "细节", max: 10, color: "#C06B54" },
            //   { name: "情绪", max: 10, color: "#C06B54" },
            //   { name: "野心", max: 10, color: "#C06B54" },
            //   { name: "内耗", max: 10, color: "#C06B54" },
            //   { name: "统筹", max: 10, color: "#C06B54" },
          ],
          //坐标轴线相关设置
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.3,
              color: "#82B980",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 0.3,
              color: "#82B980", // 设置网格线的颜色
            },
          },
          // splitArea: {
          //   //蛛网
          //   areaStyle: {
          //     //每层区域的颜色
          //     color: ["none", "none", "none", "none"],
          //   },
          // },
        },
        series: [
          {
            name: "六维属性分析",
            type: "radar",
            symbol: "none", //隐藏端点
            data: [
              {
                // value: [3.6, 3.4, 3.5, 0.1, 3.6, 3.6],
                value: [],
                name: "六维属性分析",
                symbolSize: 4,
                label: {
                  normal: {
                    backgroundColor: "white", // 设置背景颜色为白色
                    padding: [10, 10, 10, 10], // 设置padding为10px
                  },
                },
              },
            ],
            areaStyle: {
              // color: "#2AA5D8",
              // opacity: 1,
              // shadowBlur: 5,
              // shadowColor: "rgba(0, 33, 109, 0.16)",
              // shadowOffsetY: 2,
              color: {
                //线性渐变
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#2AA5D8", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#51B78A", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              normal: {
                color: "#C06B54", //每一层端点的颜色
              },
              // borderWidth:0.5
            },
            lineStyle: {
              color: "#63FA5D", //每一层线的颜色
            },
          },
        ],
      },
    };
  },
  mounted() {
    uni
      .createSelectorQuery()
      .in(this)
      .select(".allContainer")
      .boundingClientRect((rect) => {
        this.$emit("listenRect", rect, 6);
      })
      .exec();
  },
  created() {
    // this.chartData.radar.indicator = this.radarChart.map((item) => {
    //   return {
    //     name: item.propertyName,
    //   };
    // });

    const value = [];
    this.radarChart.forEach((item) => {
      value.push(item.propertyScore);
    });
    this.chartData.series[0].data[0].value = value;
    const maxNumber = Math.max(...value);
    const res = [];
    this.radarChart.forEach((item) => {
      res.push({
        name: item.propertyName,
        max: maxNumber,
        color: "#C06B54",
      });
    });
    this.chartData.radar.indicator = res;
  },
  methods: {
    loadMore() {},
    // 绘制 ECharts
    lineInit(e) {
      let { width, height } = e;
      let canvas = this.$refs.lineChart.canvas;
      echarts.setCanvasCreator(() => canvas);
      this.lineChart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      canvas.setChart(this.lineChart);
      this.lineChart.setOption(this.chartData);
      this.$refs.lineChart.setChart(this.lineChart);
    },
  },
};
</script>

<style lang="scss" scoped>
.allContainer {
  position: relative;
  padding-bottom: 60rpx;
  width: 100%;
  background-size: 20rpx auto;
  background-image: url($img-base + "career/careerAssessNew/liuLeaf.png");
  background-repeat: no-repeat;
  background-position: right 180rpx;
  text-align: -webkit-right;
}

.textImg {
  height: 130rpx;
  width: 520rpx;
  image-rendering: -webkit-optimize-contrast;
  z-index: 9;
  position: relative;
}
.smallTitleGreen {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #000;
  //line-height: 120rpx;
}

.smallTitleRed {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ed5c22;
  //	line-height: 120rpx;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.imgFloatRight {
  position: absolute;
  width: 696rpx;
  height: 1000rpx;
  right: 2rpx;
  top: 580rpx;
  z-index: 9;
}
/* 雷达图父容器 */
.charts-box {
  width: 100%;
  height: 400rpx;
}
.maxMinContent {
  display: flex;
  flex-direction: column;
  padding: 0 32rpx;
}
.propertyNameBtn {
  margin-top: 35rpx;
  width: 106rpx;
  height: 64rpx;
  background: #d5eee9;
  font-weight: 500;
  // border: 1px solid;
  // border-image: linear-gradient(0deg, #cad8bc, #ffffff) 10 10;
  border-radius: 5rpx;
  line-height: 64rpx;
}
.propertyName {
  text-align: center;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #528d8c;
}

.propertyDesc {
  font-size: 28rpx;
  color: #555555;
  margin-top: 22rpx;
  display: flex;
  line-height: 50rpx;
}

.onePartContent {
  font-size: 28rpx;
  color: #555555;
  margin-top: 47rpx;
  line-height: 40rpx;
}

.gemstonOutsizeBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.gemstoneBox {
  display: flex;
  flex-direction: row;
  margin-top: 7rpx;
  margin-bottom: 7rpx;
  align-items: center;
}

.gemstoneImg {
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.gemstoneText {
  width: 224rpx;
  //height: 40rpx;
  font-family: SourceHanSansCN-Regular;
  font-size: 28rpx;
  font-weight: normal;
  font-stretch: normal;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
  color: #c06b54;
  text-align: center;
  background-image: linear-gradient(
    91deg,
    #d7e4cb 0%,
    #ddeccc 51%,
    #d7e4cb 100%
  );
  //border-radius: 2rpx;

  clip-path: inset(0 round 2px);
}
.contentBack {
  text-align: left;
  position: relative;
  width: 100%;
  margin-top: -10rpx;
  background: linear-gradient(
    to bottom,
    #8de5ba 0%,
    #ccf0d7 50rpx,
    #f6f4df 80rpx,
    #f9f7e5 100%
  );
  padding: 20rpx 0 80rpx 0;
  border-radius: 15rpx 0 15rpx 15rpx;
}
.blackBox {
  content: "";
  width: 30rpx;
  max-width: 10rpx;
  height: 38rpx;
  margin-right: 20rpx;
  margin-top: 6rpx;
  background: #000;
  color: #000;
  font-size: 26rpx;
}
.bottomImg {
  position: absolute;
  width: 100%;
  height: 40rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.blueBox {
  width: 26rpx;
  height: 20rpx;
  background: linear-gradient(to right, #88c881 0%, #f9f7e5 100%);
  margin-top: 15rpx;
  margin-right: 10rpx;
}
</style>
